<template>
  <div>
    <!-- 子组件内容 -->
    <!-- 动态组件 -->
    <component :is="comp" v-model="msg"></component>

    <button @click="comp = 'MyOne'">1</button>
    <button @click="comp = 'MyTwo'">2</button>
  </div>
</template>

<script>
import MyOne from '@/components/MyOne.vue'
import MyTwo from '@/components/MyTwo.vue'

export default {
  components: {
    MyOne,
    MyTwo,
  },
  data() {
    return {
      comp: 'MyOne',
      oneData: '123',
      twoData: '321',
    }
  },

  computed: {
    msg: {
      get() {
        if (this.comp === 'MyOne') {
          return this.oneData
        } else {
          return this.twoData
        }
      },

      set(value) {
        if (this.comp === 'MyOne') {
          this.oneData = value
        } else {
          this.twoData = value
        }
      },
    },
  },
}
</script>

<style scoped></style>
